<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
		<title>api</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/classifyList.css" />
	</head>
	<style>
		.classify {
			position: fixed;
			top: 0px;
			left: 0px;
			z-index: 1000px;
		}
	</style>
	<body>
		<script id="class-template" type="text/x-dot-template">
			{{ for(var i=0; i< it.length; i++) { }}
			<dd style="position:relative"  class="detail-item" >
			{{if(it[i].yunjiage==10){}}
                  <img src="../image/ten.png" class="ico ico-label ico-label-goods">
                  {{}}}
			<div class="detail-img" onclick="openGoodsDetail({{=it[i].id}})" >
			
			<img src="http://wap.jqmao.cn/statics/uploads/{{=it[i].thumb}}" width="82px" height="82px">
			</div>
			<div class="detail-content" onclick="openGoodsDetail({{=it[i].id}})" >
			<div class="detail-title">
			<p>{{=it[i].title}}</p>
			</div>
			<div class="w-progressBar">
			<p class="wrap">
			<span class="bar" style="width:{{=it[i].sengbi}}%;"> <i class="color"></i>
			</span>
			</p>
			<span class="txt aggregate gray">
			总需{{=it[i].zongrenshu}}
			</span>
			<span class="txt right gray">
			剩余{{=it[i].zongrenshu-=it[i].canyurenshu}}
			</span>
			</div>
			</div>
			<div class="add-button ">
			<button onclick="addCart({{=it[i].id}})" class="red">加入清单</button>
			</div>
			{{}}}
		</script>
		<div id='classifyList'>
			<div id='list_detail'>
				<dl id='class-content'></dl>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/zepto.min.js"></script>
	<script type="text/javascript" src="../script/api.js"></script>
	<script src='../script/swipe.js'></script>
	<script type="text/javascript" src="../script/doT.min.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript">
		apiready = function() {
		api.setFrameAttr({
            name: api.frameName,
            customRefreshHeader:"UIPullRefreshFlash",
            bounces:true
        });
			var total = '';
			var type = api.pageParam.type;
			getData(type, true);
			function getData(type, isReload, currentPage) {
				var pageSize = 10;
				currentPage = isReload ? 0 : currentPage;
				api.ajax({
					url : 'http://wap.jqmao.cn/getClassList',
					method : 'post',
					data : {
						values : {
							type : type,
							pageSize : pageSize,
							currentPage : currentPage
						}
					}
				}, function(ret, err) {
					if (ret) {
						total = ret['total']
						var content = $api.byId('class-content');
						var tpl = $api.byId('class-template').text;
						var tempFn = doT.template(tpl);
						//alert($api.getStorage('type'));
						//alert(type)
						api.hideProgress();
						if (isReload) {
							$api.setStorage("currentPage", 0);
							// 重新设置为0
							$api.html(content, tempFn(ret['list']));
						} else {
							$api.append(content, tempFn(ret['list']));
						}
					} else {
						//alert(JSON.stringify(err));
					}
				});
			}

			//下拉刷新
			 //下拉刷新
    api.setCustomRefreshHeaderInfo({
            bgColor : '#f0f0f0',
            image: {
        pull: 'widget://image/refresh/1.png', 
        transform: [
            'widget://image/refresh/1.png', 
            'widget://image/refresh/2.png',
            'widget://image/refresh/3.png',
            'widget://image/refresh/4.png',
            'widget://image/refresh/5.png',
            'widget://image/refresh/6.png',
            'widget://image/refresh/7.png'
        ],
        load: [ 
            'widget://image/refresh/1.png', 
            'widget://image/refresh/2.png',
            'widget://image/refresh/3.png', 
            'widget://image/refresh/4.png',
            'widget://image/refresh/5.png'
        ]
    }
        }, function() {
            //下拉刷新被触发，自动进入加载状态，使用 api.refreshHeaderLoadDone() 手动结束加载中状态
            setTimeout(function(){
             
        var typeName = $api.getStorage('type');
				//alert(typeName)
				getData(type, true);
				api.refreshHeaderLoadDone();
            }, 800);
           
      });
			
			//上拉加载
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				$("#more").show();
				var _page = parseInt($api.getStorage("currentPage"));
				if (_page + 10 <= total) {
					getData(type, false, _page + 10);
					$api.setStorage("currentPage", _page + 10);
					// 页码+1
				} else {
					$("#more").hide();
				}
			});
		}
	</script>
</html>